<template>
  <a-form-model ref="form" class="dmform" :model="formData">
    <div class="dmform-groups">
      <div class="dmform-group-title">表单标题</div>
      <table class="dmform-group">
        <tr>
          <th>输入框</th>
          <td>
            <a-input />
          </td>
          <th>下拉框</th>
          <td>
            <a-select allowClear>
              <a-select-option value="aqpj">安全评价</a-select-option>
              <a-select-option value="aqbzh">安全标准化</a-select-option>
              <a-select-option value="zwpj">职卫评价</a-select-option>
            </a-select>
          </td>
        </tr>
        <tr>
          <th>单选框</th>
          <td colspan="3">
            <a-radio-group>
              <a-radio value="0">停用</a-radio>
              <a-radio value="1">启用</a-radio>
            </a-radio-group>
          </td>
        </tr>
        <tr>
          <th>多选框</th>
          <td colspan="3">
            <a-checkbox-group>
              <a-checkbox value="0">云南</a-checkbox>
              <a-checkbox value="1">四川</a-checkbox>
              <a-checkbox value="3">贵州</a-checkbox>
            </a-checkbox-group>
          </td>
        </tr>
        <tr>
          <th>弹窗单选</th>
          <td>
            <TreeSelectDialog placeholder="下拉单选"
                              v-model="formData.orgId"
                              :data="orgObject"
                              data-url="/jsofted/org/tree"
            />
          </td>
          <th>弹窗多选</th>
          <td>
            <TreeSelectDialog placeholder="下拉多选"
                              v-model="formData.orgIdList"
                              :data="orgList"
                              data-url="/jsofted/org/tree"
                              multiple
            />
          </td>
        </tr>
        <tr>
          <th>上传图片(单选)</th>
          <td>
            <UploadImage v-model="formData.logoImage"
                         rel-type="CustomEntity"
                         rel-field="logoImage"
            />
          </td>
          <th>上传图片(多选)</th>
          <td>
            <UploadImage v-model="formData.logoImages"
                         rel-type="CustomEntity"
                         rel-field="logoImage"
                         multiple
            />
          </td>
        </tr>
        <tr>
          <th>上传文件(单选)</th>
          <td>
            <UploadFile v-model="formData.doc"
                        rel-type="CustomEntity"
                        rel-field="doc"
            />
          </td>
          <th>上传文件(多选)</th>
          <td>
            <UploadFile v-model="formData.docs"
                        rel-type="CustomEntity"
                        rel-field="docs"
                        multiple
            />
          </td>
        </tr>
      </table>
      <div class="dmform-group-title">表单标题2</div>
      <table class="dmform-group">
        <tr>
          <th>输入框</th>
          <td>
          </td>
          <th>下拉框</th>
          <td>
          </td>
        </tr>
        <tr>
          <th>单选框</th>
          <td colspan="3">
          </td>
        </tr>
        <tr>
          <th></th>
          <td colspan="3">
          </td>
        </tr>
        <tr>
          <th></th>
          <td>
          </td>
          <th></th>
          <td>
            只读字段的内容。只读字段的内容，只读字段的内容，只读字段的内容，只读字段的内容。
          </td>
        </tr>
      </table>
    </div>
  </a-form-model>
</template>
<script>
export default {
  data () {
    return {
      formData: {
        //
        orgId: undefined,
        orgName: undefined,
        //
        orgIdList: undefined, // 多选，数组类型
      },
      orgObject: {}, // Object类型，弹窗选中的数据会回写到对象中，格式: {id: orgId, name: orgName}
      orgList: [], // Array类型，弹窗选中的数据会回写到对象中，格式：[{id:Number, name:String}, ...]
    }
  },
  watch: {
    'orgObject.name': function(v) {
      this.formData.orgName = v
      console.log('orgObject: ', JSON.stringify(this.orgObject))
    },
    orgList: {
      handler: function(v) {
        console.log('orgList: ', JSON.stringify(v))
      },
      deep: true
    }
  }
}
</script>